<template>
    <div class='zlcSelect'>
        <zlc-button style="width: 30px;">
            <a-tooltip>
                <template #title>{{ selected[0] }}</template>
                {{ selected[0] }}
            </a-tooltip>
            <DownOutlined class="icon"/></zlc-button>
        <div class='select'>
            <div :class="['item', selected.includes(item.projectName) ? 'on' : 'off']" v-for='(item, index) in datas' :key='index' @click='select(item)'>
                {{ item.projectName || "--"}}
            </div>
        </div>
    </div>
</template>

<script>
import zlcButton from "/src/components/zlcButton/zlcButton.vue"
import { DownOutlined } from "@ant-design/icons-vue"
import {toRefs, ref, onMounted, watch} from "vue"
export default {
    name: 'zlcSelect',
    components: { zlcButton, DownOutlined },
    props:{
        datas:{
            type: Array,
            default(){
                return []
            }
        }
    },
    setup(prop, context){
        let { datas } = toRefs(prop)
        let selected = ref(['---'])//data.value[0].projectName
        let select = item => {
            // selected.value = [item.projectName]
            // context.emit('changeBaseType', item)
        }

        watch(datas, (newValue, oldValue) => {
            // selected.value = [newValue[0].projectName]
        }, { deep:true })


        return {
            selected,
            select
        }
    }

}
</script>

<style scoped lang='less'>
.zlcSelect{
  display: inline-block;
  position: relative;
  .icon{
    font-size: 12px;
  }
  .on{
    background: linear-gradient(to bottom, rgba(31, 51, 78, 1), rgba(69, 136, 230, 1));
  }
  @keyframes show{
    from{
      height: 0;
    }
    to{
      height: 100px;
      animation: all 1s;

    }
  }
  .select{
    width: 100%;
    height: 0;
    background: rgba(34, 48, 59, 1);
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 99;

    left: 0;
    top: 32px;
    overflow: hidden;
    cursor: pointer;
    .item{
      height: 33px;
      line-height: 33px;
    }
    .item.on{
      background: rgba(69, 136, 230, 1);
    }
  }
  &:hover .select{
    height: 100px;
    animation: show 0.3s;
    max-height: 100px;
    .item{
      &:hover{
        background: rgba(69, 136, 230, 0.5);
      }
    }
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    /* 无内容时的滚动条样式 */
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(69, 136, 230, 0.5);
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.1);
    }

    /* 有内容时的滚动条样式 */
    &::-webkit-scrollbar-thumb {
      background: rgba(69, 136, 230, 0.5);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: rgba(69, 136, 230, 0.5);
    }

    &::-webkit-scrollbar-corner {
      background: rgba(80, 248, 255, 0.10);
    }

  }
}
</style>
